<template>
	<div class="Written">
		<van-swipe style="height: 50px" vertical :show-indicators="false" autoplay="2000">
			<van-swipe-item class="sw_item" v-for="(item,index) in commonList" :key="index">
				<img src="../../assets/image/闹钟.png" alt="" class="sw_img" />
				<div class="sw_right">
					<div class="sw_name">{{item.name}}</div>
					<div class="sw_desc">{{$t('isSwiper.tip1')}}{{item.money}}{{$t('isSwiper.tip2')}}</div>
				</div>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
	export default {
		name: "ipSwiper",
		data() {
			return {
				commonList: [{
					name: 'dan****@hotmail.com',
					money: '￥2800'
				}, {
					name: 'siv****@gmail.com',
					money: '￥3300'
				}, {
					name: 'rag****@gmail.com',
					money: '￥2000'
				}, {
					name: 'arr****@hotmail.com',
					money: '￥50000'
				}, {
					name: 'saw****@hotmail.com',
					money: '￥1000'
				}, {
					name: 'dag****@hotmail.com',
					money: '￥9000'
				}, ]
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media only screen and (min-width: 900px) {
		.sw_right {
			display: flex;
			flex-direction: row !important;
		}
	}

	.Written {
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 15px;
		box-sizing: border-box;

		.sw_item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			height: 50px;

			img {
				width: 22px;
				height: 22px;
				margin-right: 10px;
			}

			.sw_right {
				display: flex;
				flex-direction: column;

				.sw_name {
					display: flex;
					align-items: center;
				}

				.sw_desc {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>
